@(message: String)
    @main2(message) {
        @*<script src="/main2/js/jstree/jquery-1.10.2.min.js" type="text/javascript"></script>*@
        <link rel="stylesheet" href="../main2/css/jstree/style.min.css" />
        <div class="row">
            <div class="col-md-6">
                <div class="portlet light ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-social-dribbble font-blue-sharp"></i>
                            <span class="caption-subject font-blue-sharp bold uppercase">角色分类</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="rolesUL">
                            <ul>
                                @* class值：jstree-open（节点展开）,jstree-clicked(标记节点)*@
                                @*data-jstree属性：{"opened":true}（展开）, {"selected":true} （选中）,{"disabled":true} (不可选)，{"icon":"icon address"}图标*@@*<li id="child_node_1" data-jstree='{"opened":true}'>Root node 1*@
                                <li id="child_node_1" data-jstree='{"opened":true}'>Root node 1
                                    <ul>
                                        <li id="child_node_1_1"data-jstree='{"selected":true}'><a href="www.baidu.com">Child node 1</a></li>
                                        <li id="child_node_1_2">Child node 2</li>
                                    </ul>
                                </li>
                                <li id="child_node_2">Root node 2</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="portlet light ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-bubble font-green-sharp"></i>
                            <span class="caption-subject font-green-sharp bold uppercase">权限树</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="jstree2">


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button>demo button</button>
        <script src="../main2/js/jstree/jstree.min.js"></script>
        <script>
                $(function () {
                    var menuArray=[$("#roleAndPermeissionManager"),$("#permeissionManager")];
                    activeMenu( menuArray);
                   /* $('#jstree').jstree({"checkbox" : {"keep_selected_style" : true},"plugins" : [ "checkbox","changed" ,"contextmenu"]});
                    //$('#jstree').jstree();
                    $('#jstree').on("changed.jstree", function (e, data) {//节点被选中选项发生变化时的记录
                        console.log(data);
                        console.log(data.selected[data.selected.length]);
                        //$('#jstree').jstree(true).close_node('child_node_1',5000);
                        // console.log( $('#jstree').jstree(true).close_node('child_node_1',1000));

                    });*/
                    $.get('/roleAndPermisson/findAllRoles',function (date) {
                        date = eval('('+date+')')
                       // console.log(date)
                        $("#rolesUL").html=""
                        var rolesHtml="<ul>"
                        if (date!=null && date!=''){
                            for(var i=0;i<date.length;i++){
                                var ii=i+1;
                                rolesHtml+="<a  id='role"+ii+"' class='roleLi'><li>"+date[i].text+"</li></a>"
                            }
                            rolesHtml+="<ul>"
                            $("#rolesUL").html(rolesHtml)
                        }
                        /*$('#jstree').jstree({ 'core' : {
                            'data' :date,
                            "animation":100,//节点展开速度
                            "multiple":true,
                            "worker":false,
                            "themes":{ "stripes":false,icons:false }
                        }, 'plugins':['contextmenu','themes','wholerow']

                        });*/
                    });


                    $.get('/roleAndPermisson/findAllPermeissons',function (date) {
                        date = eval('('+date+')')
                        $('#jstree2').jstree({
                            'core' : {
                                'data' :date,
                                "animation":100,//节点展开速度
                                "multiple":true,
                                "worker":false,
                                "themes":{ "stripes":false,icons:false }
                             },
                            'checkbox':{
                                "three_state":false,
                                "cascade":"up+undetermined"
                            },
                            'plugins':['checkbox','contextmenu','themes','wholerow'],


                        });
                        var roleArray=['001','001001']
                        $('#jstree2').jstree('select_node',roleArray );
                    });
                    $("#rolesUL").on('click','.roleLi',function () {
                        //获取指定角色所拥有的权限，并将其展示在右侧权限树中。所需参数：角色的id
                       var roleId = this.id.substr (4);
                       $.get('/roleAndPermisson/permeissonsOfRole/'+roleId,function (date) {
                           date=eval(date);
                           $('#jstree2').jstree('deselect_all');
                           $('#jstree2').jstree('select_node',date );
                        })
                    })

                     $('#jstree2').on("changed.jstree", function (e, data) {
                     //销毁所有树 $.jstree.destroy ()
                     // $('#jstree2').jstree(true).close_node('ajson2',5000)
                    /* $.jstree.defaults.core.themes.variant = "large";
                     $('#jstree2').jstree('close_node', 'ajson2',500);
                     console.log($.jstree.defaults.core)*/
                         if (data.action=='select_node'||data.action=='deselect_node'){
                            var parents =data.node.parents;
                             $('#jstree2').jstree('select_node',parents )
                         }
                         console.log(data);
                     });


                });

        </script>

    }


